import React, { useContext,useState,useEffect } from 'react'
import {ThemeContext} from './Context'

const Right = () => {
    const state = useContext(ThemeContext);//在函数组件里获取状态的一种方式,获取的是provider中value的值

    const [num,setNum] = useState(0);//在函数组件中声明状态、更新状态，useState返回的是一个数组，要填的参数是默认值
    const [time,setTime] = useState(new Date().toLocaleTimeString());

    const add = () => {
        setNum(num+1);
    };

    //useEffect代替componentDidMount,componentDidupdate,componentWillUnmount
    useEffect(() => {
        setInterval(() => {
            setTime(new Date().toLocaleTimeString())
        },1000);
    },[time]);//指定参数，哪个参数变化useEffect就调用；不加数组参数，默认所有会更新状态的参数更新状态时useEffect都会调用；若加的参数为空数组，则useEffect只在最开始调用一次，以后不会再次被调用

    return <div>
        <nav style={{color:state.color}}>context</nav>
        <h1>hooks-{num}</h1>
        <button onClick={add}>add</button>
        <h2>当前时间：{time}</h2>
    </div>
}

export default Right;